<template>
    <div class="EquipmentStatistics">
        <div class="content">
            <div class="static-data" v-for="(item, index) in (data as any)">
                <div class="static-title">
                    {{ item.title }}
                </div>
                <div class="static-value">
                    {{ item.value }}
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineProps, toRefs } from 'vue';
const props = defineProps({
    data: {
        type: Array,
        default: () => []
    }
})
const { data } = toRefs(props);

</script>

<style scoped lang="scss">
.EquipmentStatistics {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .content {
        display: flex;
        justify-content: space-around;
        width: 100%;
        height: 100%;

        .static-data {
            flex: 0.33;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;

            .static-title {
                font-size: clamp(1rem, 0.83vw, 2rem);
                color: #9FE2FF;
            }

            .static-value {
                font-size: clamp(2rem, 1.67vw, 4rem);
                text-shadow: 0px 0px 6px #26BEFF;
                color: #E2F2FF;
                margin-top: clamp(0.625rem, 0.52vw, 1.25rem);
            }
        }

    }

}
</style>